<template>
  <div>
    <div>
      <div class="current_account">
        <div class="current_account_wrap">
          <div class="current_account_box">
            <div class="left">
              <img
                class="ico"
                src="@/assets/img/icon/icon_account.png"
                alt=""
              />
              <div v-if="currentAccoutName" class="name">
                <span class="current">当前账号：{{ currentAccoutName }}</span>
              </div>
              <div v-else class="not_login">当前未登录，请登录</div>
            </div>
            <!-- <span class="switch" @click="goto('/select-account')">切换</span> -->
          </div>
        </div>
      </div>
      <div v-if="nav.length > 0" class="nav page_space">
        <div
          v-for="(item, index) in nav"
          :key="index"
          class="nav_item"
          @click="goto(item.url)"
        >
          <img :src="item.iconPath" alt="" />
          <span>{{ item.text }}</span>
        </div>
      </div>

      <!-- 待检测 -->

      <!-- <div class="support">
        <p>广东省政务服务数据管理局提供服务</p>
        <p>广州软件应用技术研究院提供技术支持</p>
      </div> -->
    </div>
    <tab-bar />
  </div>
</template>

<script>
import tabBar from '@/components/tab-bar'
import { getUser, getToken } from '@/api/account'
import { getRoleName } from '@/api/person'
export default {
  name: 'home',
  components: {
    tabBar
  },
  data() {
    return {
      nav: [],
      currentAccoutName: '',
      list: []
    }
  },
  created() {
    this.getToken()
    this.getAuthority()
    // 获取到后需要获取token
    // https://fp.id-cas.cn/manageServer/public/token.do?action=generate&username=yzkjns&userId=2302211100143410000
  },
  methods: {
    // 获取用户角色，判断权限
    getAuthority() {
      const roleName = this.$store.getters.roleName
      console.log('角色：', roleName)
      //  === '检测员'
      if (roleName) {
        this.nav = []
      } else {
        this.nav = [
          {
            iconPath: require('@/assets/img/icon/nav_choujian.png'),
            text: '快检主体',
            url: '/inspection-subject'
          },
          {
            iconPath: require('@/assets/img/icon/nav_caiyang.png'),
            text: '样品检测',
            url: '/sampling-test'
          },
          {
            iconPath: require('@/assets/img/icon/nav_choujian.png'),
            text: '采样台账',
            url: '/sampling-ledger'
          }
          // {
          //   iconPath: require('@/assets/img/icon/nav_choujian.png'),
          //   text: '检测台账',
          //   url: '/inspection-ledger'
          // }
          // {
          //   iconPath: require('@/assets/img/icon/nav_tongji.png'),
          //   text: '统计分析',
          //   url: ''
          // }
        ]
      }
    },
    async getUser() {
      const { code, data } = await getUser()
      if (code === '0') {
        this.currentAccoutName = data.fullName
        let userId = data.id
        // get roleName
        const { code: code2, data: data2 } = await getRoleName(userId)
        if (code2 === '0') {
          if (data2.content.length > 0) {
            let roleName = data2.content[0].roleName
            console.log('角色：', roleName)
            this.$store.dispatch('app/setRoleName', roleName)
          }
        }
      }
    },
    async getToken() {
      // console.log('username 和 userId', this.$route.query)
      let username = this.$route.query.username
      let userId = this.$route.query.userId
      if (userId && username) {
        const { code, data } = await getToken(username, userId)
        if (code === '0') {
          this.$store.dispatch('app/setToken', data)
        }
      }
      // 获取用户信息
      this.getUser()
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/assets/style/mixin.scss';
.current_account {
  position: relative;
  width: 100%;
  height: 177px;
  opacity: 1;
  background: url(@/assets/img/banner_1.png) no-repeat;
  background-size: 100% 100%;
  &_wrap {
    width: 10px;
    background: red;
  }
  &_box {
    width: 345px;
    height: 49px;
    padding: 15px;
    border-radius: 6px;
    background: #fff;
    position: absolute;
    bottom: -25px;
    left: 15px;
    box-shadow: 0px 2px 8px 0px rgba(178, 184, 189, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      .ico {
        margin-right: 5px;
        width: 15px;
        height: 15px;
      }
      .name {
        font-family: PingFang SC Medium;
        font-size: 14px;
        font-weight: normal;
        line-height: 19px;
        letter-spacing: 0px;
        color: #171819;
        display: flex;
        align-items: center;
        .current {
          @include ellipsis;
          width: 300px;
        }
      }
      .not_login {
        font-family: PingFang SC Medium;
        font-size: 14px;
        font-weight: normal;
        line-height: 19px;
        letter-spacing: 0px;
        color: #b2b8bd;
      }
    }
    .switch {
      font-family: PingFang SC Medium;
      font-size: 14px;
      font-weight: normal;
      line-height: 19px;
      letter-spacing: 0px;
      color: #2163e0;
    }
  }
}
.nav {
  margin-top: 35px;
  width: 345px;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0px 2px 8px 0px rgba(178, 184, 189, 0.1);
  display: flex;
  // justify-content: space-between;
  // align-items: center;
  padding: 15px 0;
  flex-flow: row wrap;
  &_item {
    flex: 0 0 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: PingFang SC Medium;
    font-size: 12px;
    font-weight: normal;
    line-height: 19px;
    text-align: center;
    letter-spacing: 0px;
    color: #171819;
    margin-bottom: 12px;
    // &:last-of-type {
    //   margin-bottom: 0;
    // }
    img {
      display: block;
    }
  }
}
.support {
  font-family: PingFangSCMedium-Medium;
  font-size: 13px;
  font-weight: normal;
  line-height: 18px;
  letter-spacing: 0px;
  color: #b2b8bd;
  text-align: center;
  position: absolute;
  left: 0px;
  width: 100%;
  bottom: 120px;
}
</style>
